<!-- 左侧工具条：组件模块 -->
<template>
    <div class="component">
        <!-- <h3>左侧工具条：组件模块</h3> -->
        <div class="search-box" v-if="globalOptions.componentSearch">
            <a-input v-model:value="data.keyword" placeholder="请输入组件名称" @input="onSearchComponent" allow-clear>
                <template #prefix>
                    <SearchOutlined />
                </template>
            </a-input>
        </div>

        <div class="component-content" :class="{hasSearch:globalOptions.componentSearch}">
            <template v-if="!data.onSearch">
                <a-collapse v-model:activeKey="data.activeKey">
                    <template v-for="(groupItem,index) in componentList" :key="groupItem.id">
                        <a-collapse-panel :header="groupItem.groupName" v-show="groupItem.isShow">
                            <draggable tag="div" :list="groupItem.list" class="component-list" v-bind="data.dragOption">
                                <template #item="{ element,index }">
                                    <div class="component-item" v-if="element.isShow" :title="element.name">
                                        <dc-icon :icon="element.icon" className="component-item-icon" />
                                        <span class="component-item-label">{{element.name}}</span>
                                    </div>
                                </template>
                            </draggable>
                        </a-collapse-panel>
                    </template>
                </a-collapse>
            </template>
            <template v-else>
                <template v-if="data.searchData.length > 0">
                    <a-collapse v-model:activeKey="data.searchActiveKey">
                        <template v-for="(groupItem,index) in data.searchData" :key="groupItem.id">
                            <a-collapse-panel :header="groupItem.groupName" v-show="groupItem.isShow">
                                <draggable tag="div" :list="groupItem.list" class="component-list"
                                    v-bind="data.dragOption">
                                    <template #item="{ element,index }">
                                        <div class="component-item" v-if="element.isShow" :title="element.name">
                                            <dc-icon :icon="element.icon" className="component-item-icon" />
                                            <span class="component-item-label">{{element.name}}</span>
                                        </div>
                                    </template>
                                </draggable>
                            </a-collapse-panel>
                        </template>
                    </a-collapse>
                </template>

                <template v-else>
                    <div class="empty-box">
                        <a-empty>
                            <template #description>
                                <span class="empty-box-text">未查询到相关组件</span>
                            </template>
                        </a-empty>
                    </div>
                </template>
            </template>
        </div>
    </div>
</template>

<script setup>
import { reactive } from 'vue'
import draggable from "vuedraggable"
import { componentList, searchComponent } from '../../componentManager.js'
import { globalOptions, getPrimaryId } from '../../pageManager.js'

// 数据
const data = reactive({
    activeKey: ['1', '2'],
    // activeKey: ['3', '4'],
    searchActiveKey: [],
    componentData: [],
    keyword: "",
    searchData: [],
    dragOption: {
        group: { name: 'form-draggable', pull: 'clone', put: false },
        sort: false,
        animation: 180,
        ghostClass: '',
    },
})

/**
 * 搜索组件
 * @param {Object} e 组件实例
 */
const onSearchComponent = (e) => {
    let value = e.target.value
    if (value != "") {
        data.onSearch = true
        data.searchData = searchComponent(value)

        for (let i = 0; i < data.searchData.length; i++) {
            let item = data.searchData[i]
            data.searchActiveKey.push(item.id)
        }

    } else {
        data.onSearch = false
    }
}


const created = () => {

}

created();

</script>

<style lang="less" scoped>
.ant-collapse {
    border: 0;
    border-radius: 0;
}

.component-list {
    height: auto;
    margin: 0;
    list-style: none;
    display: grid;
    transition: all 0.2s ease;
    grid-template-columns: 96px 96px 96px;
    grid-gap: 3px;

    .component-item {
        border: 1px solid var(--borderColor);
        transition: box-shadow 0.2s ease, transform 0.1s ease;
        display: flex;
        padding: 10px 0;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        color: var(--defaultColor);

        &:hover {
            color: var(--blackColor);
            position: relative;
            z-index: 99;
            box-shadow: 0 5px 8px 2px rgba(0, 0, 0, 0.2);
        }

        .component-item-label {
            transition: all 0.2s ease;
            width: 85px;
            padding: 0 5px;
            display: block;
            overflow: hidden; /* 当内容超出容器时进行隐藏 */
            white-space: nowrap; /* 不换行 */
            text-overflow: ellipsis;
            text-align: center;
            font-size: 12px;

            &::selection {
                background: none;
            }
        }
    }
}

.search-box {
    padding: 5px;
    border-bottom: 1px solid var(--borderColor);
}
.empty-box {
    padding-top: 100px;

    .empty-box-text {
        color: #999;
    }
}

.component-content {
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;

    &.hasSearch {
        height: calc(100% - 43px) !important;
    }
}

:deep(.ant-collapse .ant-collapse-content > .ant-collapse-content-box) {
    padding: 3px;
}

:deep(.ant-collapse > .ant-collapse-item > .ant-collapse-header) {
    padding: 5px 10px;
}

:deep(.ant-collapse-header-text::selection) {
    background: none;
}

:deep(.ant-collapse > .ant-collapse-item:last-child),
.ant-collapse > .ant-collapse-item:last-child > .ant-collapse-header {
    border-radius: 0 0 0 0 !important;
}
</style>